<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul id="box">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
<hr>
<ul id="box2">
</ul>
<hr>
<ul id="box3">
</ul>
<script>
    var box = document.getElementById('box');
    var attr = document.createAttribute('mydata');
    attr.value = 'frank';
    console.log(attr);
   box.setAttributeNode(attr);
   box.append(document.createElement('div'));
   // box.remove();
    box.replaceWith(document.getElementsByTagName('title')[0].clone(!0))
</script>
</body>
</html>